<template>
    <!--对垒悬浮框-->
    <div class="stand-facing positionAbCenter">
        <!--<div class="stand-facing-content positionRCT">-->
        <div class="stand-facing-content" ref="standFacing" v-if="interactMsg.interactId">
            <div class="theme-title">
                {{interactMsg.title}}
            </div>
            <div v-if="interactMsg.templateType==0" class="stand-type0">
                <div class="stand-btns justifyCtBwt positionR displayFlex" v-if="!isChoise && !interactMsg.isSelf">
                    <span class="agree feed-back-btn" v-if="Array.isArray(interactMsg.interactOptions) && interactMsg.interactOptions[0] && interactMsg.interactOptions[0].content" @click="doVote(interactMsg.interactOptions[0].id)">
                        <span class="agree-style agree-left-style"></span>
                        {{interactMsg.interactOptions[0].content}}
                    </span>
                    <span class="disagree feed-back-btn" v-if="Array.isArray(interactMsg.interactOptions) && interactMsg.interactOptions[1] && interactMsg.interactOptions[1].content" @click="doVote(interactMsg.interactOptions[1].id)">
                        <span class="agree-style agree-right-style"></span>
                        {{interactMsg.interactOptions[1].content}}
                    </span>
                </div>
                <div v-else class="stand-facing-button positionRLCT" :class="{'border-radius5':true}">
                    <div class="stand-btns justifyCtBwt positionR displayFlex">
                        <span class="agree feed-back-btn" @click="showJoinList" :class="{transition03s:parseInt(agreeWidth) > 15}" :style="{width:agreeWidth}">
                            <span class="agree-style agree-left-style border-radius5"></span>
                            <span class="person-num" v-if="interactMsg.interactOptions && interactMsg.interactOptions[0]">{{gtTenThousand(interactMsg.interactOptions[0].selectedNum || 0)}}人</span>
                            <transition name="standAdd"
                                        leave-active-class="animated fadeOutUp">
                                <span v-if="addIconShow && choiseId == interactMsg.interactOptions[0].id" class="stand-add-one">+1</span>
                            </transition>
                        </span>
                        <span class="disagree feed-back-btn" @click="showJoinList" :class="{transition03s:parseInt(agreeWidth) > 15}" :style="{width:disAgreeWidth}">
                            <span class="person-num">{{gtTenThousand(interactMsg.interactOptions[1].selectedNum)}}人</span>
                            <span class="agree-style agree-right-style border-radius5"></span>
                             <transition name="standAdd"
                                         leave-active-class="animated fadeOutUp">
                                <span v-if="addIconShow && choiseId == interactMsg.interactOptions[1].id" class="stand-add-one">+1</span>
                            </transition>
                        </span>
                    </div>
                    <div class="stand-btm-result justifyCtBwt positionR displayFlex">
                        <span class="agree-bottom-text ">
                            <span class="icon-wrap" v-if="choiseId == interactMsg.interactOptions[0].id"><span class="iconfont icon-dui1"></span></span>
                           {{interactMsg.interactOptions[0].content}}
                        </span>
                        <span class="disagree-bottom-text">
                            {{interactMsg.interactOptions[1].content}}
                            <span class="icon-wrap"  v-if="choiseId == interactMsg.interactOptions[1].id"><span class="iconfont icon-dui1"></span></span>
                        </span>
                    </div>
                </div>
            </div>
            <div v-if="interactMsg.templateType==1" class="stand-type1">
                <div class="stand-type1-btns stand-btns justifyCtBwt positionR displayFlex" v-if="!isChoise && !interactMsg.isSelf">
                    <div class="flex1">
                        <img class="stand-pen-img" @click="doVote(interactMsg.interactOptions[0].id)" :src="staticImageUrl('/images/components/pen_red_right.png')" alt="">
                        <p class="text-left">{{interactMsg.interactOptions[0].content}}</p>
                    </div>
                    <div class="flex1">
                        <img class="stand-pen-img" @click="doVote(interactMsg.interactOptions[1].id)" :src="staticImageUrl('/images/components/pen_blue_right.png')" alt="">
                        <p class="text-right">{{interactMsg.interactOptions[1].content}}</p>
                    </div>
                </div>
                <div v-else class="stand-facing-button positionRLCT" :class="{'border-radius5':true}">
                    <div class="stand-btns justifyCtBwt positionR displayFlex">
                        <span class="agree feed-back-btn" @click="showJoinList"  :class="{transition03s:parseInt(agreeWidth) > 15}" :style="{width:agreeWidth}">
                            <span class="agree-style agree-left-style border-radius5"></span>
                            <span class="person-num">{{gtTenThousand(interactMsg.interactOptions[0].selectedNum)}}人</span>
                            <transition name="standAdd"
                                        leave-active-class="animated fadeOutUp">
                                <span v-if="addIconShow && choiseId == interactMsg.interactOptions[0].id" class="stand-add-one">+1</span>
                            </transition>
                        </span>
                        <span class="disagree feed-back-btn" @click="showJoinList" :class="{transition03s:parseInt(agreeWidth) > 15}" :style="{width:disAgreeWidth}">
                            <span class="agree-style agree-right-style border-radius5"></span>
                            <span class="person-num">{{gtTenThousand(interactMsg.interactOptions[1].selectedNum)}}人</span>
                            <transition name="standAdd"
                                        leave-active-class="animated fadeOutUp">
                                <span v-if="addIconShow && choiseId == interactMsg.interactOptions[1].id" class="stand-add-one">+1</span>
                            </transition>
                        </span>
                    </div>

                    <div class="stand-btm-result justifyCtBwt positionR displayFlex">
                        <span class="agree-bottom-text ">
                            <span class="icon-wrap" v-if="choiseId == interactMsg.interactOptions[0].id"><span class="iconfont icon-dui1"></span></span>
                           {{interactMsg.interactOptions[0].content}}
                        </span>
                        <span class="disagree-bottom-text">
                            {{interactMsg.interactOptions[1].content}}
                            <span class="icon-wrap"  v-if="choiseId == interactMsg.interactOptions[1].id"><span class="iconfont icon-dui1"></span></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "StandFacing",
        props:{
            interactProp:Object
        },
        data(){
            return{
                addIconShow:false,
                agreeWidth:'50%',
                disAgreeWidth:'50%',
                isChoise:false,
                choiseId:0,
                totalNum:0,
                interactMsg:{
                    isSelf:false,/*@isSelf是否为自己发起的话题*/
                    interactId:0,//互动id
                    title:'',//互动标题
                    templateType:0,//对垒魔板
                    scale:1,//缩放比例
                    axisX:'',//话题出现的x轴位置
                    axisY:'',//话题出现的x轴位置
                    interactOptions:[
                        // {
                        //     "id": 1,
                        //     "optionLevel": 1,              //-----选项级别:统计-1，对垒1-对一个选项，2-对应第二个选项，互动选项依次往下推
                        //     "content": "算我一个",          //-----选项描述
                        //     "selectedNum": 0,              //-----该选项的选择人数
                        // }
                    ],
                    interactOptionId: 0                  //-----互动选中选项id:对应interactOptions里面的id
                }
            }
        },
        mounted() {
            let that = this;
            this.interactMsg = Object.assign({},this.interactMsg,this.interactProp);
            for(let value of that.interactMsg.interactOptions){
                that.totalNum += value.selectedNum;
            }
            if( that.interactMsg.interactOptions && that.interactMsg.isSelf ){
                this.selfShow(that.interactMsg.interactOptions[0].id);
            }
            if(this.$refs.standFacing){
                this.$refs.standFacing.style.left = this.interactMsg.axisX + "px";
                this.$refs.standFacing.style.top = this.interactMsg.axisY + "px";
            }
        },
        methods:{
            doVote(id){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                if(this.interactProp.isSelf){
                    this.$emit('recordList',this.interactProp.interactOptions[0].id);
                    return;
                }
                let that = this;
                this.choiseId = id;
                this.isChoise = true
                this.agreeWidth = '15%';
                this.disAgreeWidth = '15%';
                let choiseLength = '';
                that.totalNum++;
                for(let value in that.interactMsg.interactOptions){
                    if(that.interactMsg.interactOptions[value].id == id){
                        that.interactMsg.interactOptions[value].selectedNum ++;
                        choiseLength = that.interactMsg.interactOptions[value].selectedNum / that.totalNum * 100;
                    }
                }
                this.$emit('joinTHeme',id);
                setTimeout(()=>{
                    this.addIconShow = true;
                    this.agreeWidth = choiseLength + '%';
                    this.disAgreeWidth = 100-choiseLength + '%';
                    setTimeout(()=>{
                        this.addIconShow = false;
                    },100)
                },300);
            },
            selfShow(id){
                let that = this;
                let choiseLength = '';
                if( that.totalNum > 0 ){
                    for(let value in that.interactMsg.interactOptions){
                        if(that.interactMsg.interactOptions[value].id == id){
                            that.interactMsg.interactOptions[value].selectedNum ++;
                            choiseLength = that.interactMsg.interactOptions[value].selectedNum / that.totalNum * 100;
                        }
                    }
                    this.agreeWidth = choiseLength + '%';
                    this.disAgreeWidth = 100-choiseLength + '%';
                }else{
                    this.agreeWidth = 50 + '%';
                    this.disAgreeWidth = 50 + '%';
                }
            },
            showJoinList(){
                if(this.interactProp.isSelf){
                    this.$emit('recordList',this.interactProp.interactOptions[0].id);
                }
            }
        },
        watch:{
            interactProp(val){
                this.interactMsg = Object.assign({},this.interactMsg,val)
                if(this.$refs.standFacing){
                    this.$refs.standFacing.style.left = this.interactMsg.axisX + "px";
                    this.$refs.standFacing.style.top = this.interactMsg.axisY + "px";
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    .theme-title{
        margin-bottom: .2rem;
    }
    .stand-facing{
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        top: 25%;
        bottom: auto;
    }
    .stand-facing-content{
        padding: .15rem .05rem .1rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 2.4rem;
        text-align: center;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        background-color: rgba(0,0,0,.1);
        color: #fff;
        font-size: .18rem;
        position: relative;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .stand-facing-button{
        margin-top: .1rem;
        color: #fff;
    }
    .border-radius5{
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
    }
    .stand-btn{
        width: 1.2rem;
    }
    .stand-text{
        position: absolute;
        top: 48%;
        left: 50%;
        font-size: .16rem;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .stand-add-one{
        position: absolute;
        right: 0;
        bottom: .1rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #fff;
        background-color: #18CEF2;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: .24rem;
        line-height: .2rem;
        height: .24rem;
        font-size: .1rem;
        white-space: nowrap;
    }
    .stand-blue{
        background-color: #5181E8;
    }
    .stand-yellow{
        background-color: #FFB700  ;
    }
    .stand-btns{
        white-space: nowrap;
        margin: 0 .1rem;
    }
    .feed-back-btn{
        min-width: 25%;
        max-width: 75%;
        display: inline-block;
        height: .4rem;
        box-sizing: border-box;
        position: relative;
        line-height: .4rem;
        font-size: .15rem;
        color: #fff;
        width: 50%;

        padding: 0 .1rem;
    }
    .feed-back-btn.disagree{
        left: .1rem;
        text-align: right;
        background-image:linear-gradient(to bottom ,#407CFF,#3970E6);

        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem;
        .stand-add-one{
            left: 0;
            right: auto;
            background-color: #3970E5;
        }
    }
    .feed-back-btn.agree{
        right: .05rem;
        text-align: left;
        background-image:linear-gradient(to bottom ,#FF5340,#E64B39);
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        .stand-add-one{
            right: 0;
            left: auto;
            background-color: #FF5340;
        }
    }
    .agree-style{
        position: absolute;
        top: 0;
        display: inline-block;
        width: .2rem;
        height: .4rem;
    }
    .agree-left-style{
        right: -.06rem;
        -webkit-transform: skew(-15deg,0);
        transform: skew(-15deg,0);
        background-image:linear-gradient(to bottom ,#FF5340,#E64B39);

    }
    .agree-right-style{
        left: -.06rem;
        -webkit-transform: skew(-15deg,0);
        transform: skew(-15deg,0);
        background-image:linear-gradient(to bottom ,#407CFF,#3970E6);
    }
    .stand-btm-result{
        color: #fff;
        font-size: .12rem;
        padding: .1rem .15rem 0;
    }
    .icon-wrap{
        display: inline-block;
        width: .18rem;
        height: .18rem;
        line-height: .18rem;
        margin: 0 .05rem;
        border-radius: 50%;
        color: #fff;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        .icon-dui1{
            font-size: .1rem;
        }
    }
    .disagree-bottom-text{
        .icon-wrap{
            background-color: #3970E5;
        }
    }
    .agree-bottom-text{
        .icon-wrap{
            background-color: #FF5340;
        }
    }
    .stand-pen-img{
        width: 100%;
        object-fit: cover;
    }
    .stand-type1-btns{
        color: #fff;
        font-size: .15rem;
        margin: 0;
    }
    .person-num{
        position: relative;
        z-index: 2;
    }
    .stand-type1{
        $rightStandColor:#4FA0D7;
        $leftStandColor:#D84F69;
        .stand-add-one{
            bottom: 0;
        }
        .agree-left-style,.agree{
            height: .3rem;
            line-height: .3rem;
            background-image:linear-gradient(to bottom ,#FF5E7C,$leftStandColor);
        }
        .agree-right-style,.disagree{
            height: .3rem;
            line-height: .3rem;
            background-image:linear-gradient(to bottom ,#5EBFFF,$rightStandColor);
        }
        .agree{
            .stand-add-one{
                background-color: $leftStandColor;
            }
        }
        .disagree{
            .stand-add-one{
                background-color: $rightStandColor;
            }
        }
        .agree-bottom-text{
            .icon-wrap{
                background-color: $leftStandColor;
            }
        }
        .disagree-bottom-text{
            .icon-wrap{
                background-color: $rightStandColor;
            }
        }
    }
</style>